<template>
	<view class="content">
		<view class="column" style="background-color: #fff;">
			<view class="info_list" @click="chooseImage">
				<view class="inner">
					<image :src="userInfo.avatarUrl" mode="" class="usertou"></image>
					<u-toast ref="uToast" />
					<p style="color: #323233;font-size:3.73vw;">点击更换头像</p>
				</view>

			</view>

			<view class="center">
				<view class="ct">
					<p class="title">昵称</p>
					<view style="padding: 2.67vw 0;">
						<input type="text" v-model="userInfo.nick" placeholder="12个字以内" maxlength="12" class="nick"
							placeholder-style="color:#C8CDDB" style="font-size: 28rpx;">
					</view>
				</view>
				<view class="cb">
					<span style="width:160rpx;text-align: left;font-size: 28rpx;">所在地</span>
					<span style="flex:1;text-align: right;font-size: 28rpx;">{{userInfo.province}} - {{userInfo.city}}</span>
					<u-icon name="arrow-right" color="#969799" size="16"
						style="margin-left: 1.07vw;font-weight: 600;"></u-icon>
				</view>
			</view>

			<view class="footer">
				
				<button @click="complete">完成</button>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '../../static/images/usertou.png',
					nick: "",
					province:"北京市",
					city:"北京市",
					token:""
				},
				show:false,
				content:"1111"
			}
		},
		onLoad() {
			let that =this
			uni.getStorage({
					key: 'token',
					success: function(res) {
						console.log(res.data);
						that.userInfo.token = res.data
					}
				})
			
		
		},
		onReady() {
			this.gettouxiang(this.userInfo.token)
			
		},
		onShow(){
			
		},
		methods: {
		
			chooseImage() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						
						that.userInfo.avatarUrl = tempFilePaths[0]
						uni.uploadFile({
							//请求的url接口地址
							url: 'https://api.it120.cc/xiaochengxu/dfs/upload/file',
							fileType: 'png/jpg', //图片类型
							filePath: tempFilePaths[0], //哪张图片
							name: 'upfile', //对应接口的文件名称
							headers: {
								"Content-Type": "multipart/form-data",
							},
							success: (res) => {
								console.log(res.data)
								let tu = JSON.parse(res.data)
								console.log(tu.data.url)
								
									this.$refs.uToast.show({
										message: '头像修改成功',
										type: 'success'
									})
							},
							fail: (err) => {
								//失败的回调
								console.log(err)
								this.$refs.uToast.show({
									message: '头像设置失败',
									type: 'warning'
								})
							}
						})
					}
				})
			},
			gettouxiang(){
				let that =this
				uni.request({
					url: " https://api.it120.cc/xiaochengxu/user/detail?token=" + that.userInfo.token ,
					method: "get",
					dataType: "json",
					success: function(res) {
						console.log(res)
						that.userInfo.nick = res.data.data.base.nick
					
						if(res.data.data.base.avatarUrl){
							that.userInfo.avatarUrl = res.data.data.base.avatarUrl
						}else{
							that.userInfo.avatarUrl = '../../static/images/usertou.png'
						}
					}
				});
			},
			complete(){
				this.show=true
				let that =this
				console.log(this.userInfo)
				uni.request({
					url: " https://api.it120.cc/xiaochengxu/user/modify",
					data:that.userInfo ,
					method: "get",
					dataType: "json",
					success: function(res) {
						that.$refs.uToast.show({
							type: 'success',
							message: "修改成功"
						})
						setTimeout(() => {
							uni.switchTab({
								url: '../mine/mine'
							})
						}, 1500)
					}
				});
			}
		},
		
	}
</script>

<style lang="scss">
	.info_list {
		padding: 60rpx;
		height: 320rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: center;

		.inner {
			.usertou {
				width: 18.67vw;
				height: 18.67vw;
				border-radius: 50%;
				overflow: hidden;
				margin-bottom: 2.67vw;
				display: block;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}


		}
	}

	.ct {
		padding: 0 32rpx;

		.title {
			font-size: 3.73vw;
			font-weight: 700;
			color: #323233
		}
	}

	.cb {
		height: 88rpx;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		display: flex;
	}

	.nick {
		display: block;
		box-sizing: border-box;
		width: 100%;
		min-width: 0;
		margin: 0;
		padding: 0;
		color: #323233;
		line-height: inherit;
		text-align: left;
		background-color: initial;
		border: 0;
		resize: none;
	}

	.footer {
		height: 100rpx;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		justify-content: center;
		display: flex;
		box-shadow: 0 0.53vw 1.07vw 0 rgba(0, 0, 0, .5);
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		
		 button {
			width: 374rpx;
			height: 64rpx;
			background-color: #1ba784;
			padding: 0 4vw;
			font-size: 3.73vw;
			border: none;
			color: #ffffff;
			letter-spacing: .53vw;
			line-height:  64rpx;
		}

		
	}
</style>